<template>
      <el-menu
        class="el-menu-vertical-demo"
        background-color="#ff5a3b"
        text-color="#fff"
        active-text-color="#fff"
        :router="true"
        :unique-opened="true"
        :default-active="$route.path"
      >
        <el-menu-item :index="'/home'">
          <i class="el-icon-s-home" style="color: #fff;"></i>
          <span slot="title">管理中心</span>
        </el-menu-item>
        <el-submenu :index="nav.id+''" v-for="nav in nav_list" :key="nav.id">
          <template slot="title">
            <i class="el-icon-setting" style="color: #fff;"></i>
            <span>{{ nav.title }}</span>
          </template>
          <el-menu-item :class="{'is-active': n.url === $route.path}" :index="n.url" v-for="n in nav.children" :key="n.id">{{ n.title }}</el-menu-item>
        </el-submenu>
      </el-menu>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
    computed:{
        ...mapState(["nav_list"])        
    },
    methods: {
        ...mapMutations(["navListMutations"])
    },
    created(){
        this.navListMutations()
    }
}
</script>

<style>
.is-active{
  background-color: rgb(204, 72, 47) !important;
}
</style>